<template>
    <div>
        <d-player class="dd" ref="player" :options="dplayerOptions" @play="play" @seeked="onSeeked"></d-player>
    </div>
</template>
 
<script>
// import DPlayer from 'dplayer'
import VueDPlayer from 'vue-dplayer'
import 'vue-dplayer/dist/vue-dplayer.css'

export default {
    name: 'videoDplay2',
    components: {
        'd-player': VueDPlayer
    },
    props: {
        url: {
            type: String,
            required: true
        },
        pic: {
            type: String,
            default: ""
        },
    },
    data() {
        return {
            dplayerOptions: {
                // theme: '#b7daff',  // 风格颜色，例如播放条，音量条的颜色
                // autoplay: false,
                // loop: false,  // 是否自动循环
                // lang: 'zh-cn',  // 语言，'en', 'zh-cn', 'zh-tw'
                screenshot: true,  // 是否允许截图（按钮），点击可以自动将截图下载到本地
                // hotkey: true,  // 是否支持热键，调节音量，播放，暂停等
                // preload: 'auto',  // 自动预加载
                // volume: 0.7,  // 初始化音量
                // logo: require('@/assets/logo.jpg'),  // 在视频左脚上打一个logo
                // mutex: true, // 互斥,阻止多个播放器同时播放
                video: {
                    url: this.url, // 播放视频的路径
                    pic: this.pic,  // 视频封面图片
                    // quality: [  // 设置多个质量的视频
                    //     {
                    //         name: 'HD',
                    //         url: 'http://47.105.206.28/videos/wangkun.mp4',
                    //         type: 'auto',  // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型
                    //     },
                    //     {
                    //         name: 'SD',
                    //         url: 'http://47.105.206.28/videos/wangkun.mp4',
                    //         type: 'auto',
                    //     }
                    // ],
                    // defaultQuality: 0,  // 默认是HD
                    // thumbnails: require('@/assets/thumbnails.jpg')  // 进度条上的缩略图,需要通过dplayer-thumbnails来生成
                },
            },
            // player: {},
            id: this.$route.params.id,
        }
    },
    created() {
    },
    mounted() {
        console.log('this is current player instance object:', this.$refs.player);
        // this.player = this.$refs.player.dp;
        // const dp = this.$refs.player.dp;
        // dp.play();
        // setTimeout(() => {
        //     dp.pause();
        // }, 2000);
        // setTimeout(() => {
        //     dp.seek(10);
        // }, 3000);
        // dp.on('seeked', this.onSeeked());
    },
    methods: {
        play() {
            console.log('play callback')
        },
        onSeeked() {
            console.log('调整进度');
            // this.player.video.currentTime += 5;
        },
    },
}
</script>
 
<style>
.dd {
    width: 100%;
    height: 100%;
}
</style>